<!-- Dom模板 -->
<template>
  <div>
     <!-- Dom内容 -->
    <div class="comment">
      <div class="comment_list" v-for="(item, index) in arr" :key="index">
        <div class="comment_head" @click="liClick(item)">
          <div class="comment_head_left">
            <img :src="item.book_img_url" alt="" />
          </div>
          <div class="comment_head_right">
            <p class="comment_head_right_title">{{ item.bookname }}</p>
            <p class="comment_head_right_zan">
              <span class="iconfont icon-zan1">{{ item.good }}</span>
            </p>
            <p class="comment_head_right_fen">{{ item.score }}</p>
          </div>
        </div>
        <div class="comment_conn">
          <div
            class="comment_conn_list"
            v-for="(item1, index1) in item.collectList"
            :key="index1"
          >
            <p class="comment_com">{{ item1.evaluationtext }}</p>
            <p class="comment_time">{{ item1.time }}</p>
          </div>
        </div>
      </div>
      <div v-if="arr.length === 0" class="kong">
        <p class="iconfont icon-shoutidai">?</p>
        <p>您还没有评论的书籍哦</p>
      </div>
    </div>
     
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      booklists: [],
      booklist: [
        {
          img: "../../../static/img/v2_qsk7mn.png",
          title: "哑学霸的别样爱恋",
          zan: "12",
          fen: "9.8",
          child: [
            {
              comment:
                "书很吸引人，故事情节也非常好，越看越爱看的那种心情就不可言语的啊！故事里的人物情节感知联想！很好，非常好看！",
              time: "2021年5月7日",
            },
            {
              comment: "还有井哲这一对有点甜啦，提拉太美了呜呜",
              time: "2021年5月2日",
            },
          ],
        },
        {
          img: "../../../static/img/v2_qsk5yl.png",
          title: "他的小祖宗甜爆了",
          zan: "24",
          fen: "9.2",
          child: [
            {
              comment:
                "书很吸引人，故事情节也非常好，越看越爱看的那种心情就不可言语的啊！故事里的人物情节感知联想！很好，非常好看！",
              time: "2021年5月7日",
            },
          ],
        },
        {
          img: "../../../static/img/v2_qspsyg.png",
          title: "异能狂妻",
          zan: "7",
          fen: "8.7",
          child: [
            {
              comment:
                "书很吸引人，故事情节也非常好，越看越爱看的那种心情就不可言语的啊！故事里的人物情节感知联想！很好，非常好看！",
              time: "2021年5月7日",
            },
          ],
        },
      ],
      arr: [],
      obj: {},
      commitList:[]
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    if (sessionStorage.getItem("userId")) {
      this.$store
        .dispatch("bags/getEvaluation", {
          type: "user",
          userid: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          if (!res.info) return this.commitList=[];
          this.commitList = res.info;
          this.commitList.forEach((item) => {
            let findIndex = this.arr.findIndex((item1, index1) => {
              return item.bookid === item1.bookid;
            });
            if (findIndex === -1) {
              item.collectList = [
                {
                  evaluationtext: item.evaluationtext,
                  time: item.time,
                  evaluationid: item.evaluationid,
                  good: item.good,
                },
              ];
              this.arr.push(item);
            } else {
              this.arr[findIndex].collectList.push({
                evaluationtext: item.evaluationtext,
                time: item.time,
                evaluationid: item.evaluationid,
                good: item.good,
              });
                 let goodNum=0
               this.arr.forEach((item1)=>{
                 goodNum+=Number(item1.good)
                 })
                 this.arr[findIndex].good=goodNum
            }
          });
          console.log(this.arr);
          
        });
    }
  }, // Vue方法定义
  methods: {
    liClick(item) {
      console.log(333);
      this.$store.dispatch("bags/getCatalogData", { bookid: item.bookid });
      // this.$store.dispatch("bags/bookItem", item);
      // setTimeout(() => {
        this.$router.history.push({
          path: "/details",
          query: {
            path: this.$route.path,
          },
        });
      // });
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong {
  /* width: 50%;
  height: 250px;
  line-height: 50px;
  margin-left: 25%;
  margin-top: 100px; */
  top: 50%;
  left: 50%;
  margin-top: -0.933333rem;
  margin-left: -2.133333rem;
  position: absolute;
}
.kong p:nth-child(1) {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 35px;
  transform: rotate(-30deg);
  padding-left: 60px;
}
.kong p:nth-child(2) {
  font-size: 16px;
  font-family: PingFangSC-regular;
}
.comment {
  width: 100%;
  position: relative;
  height: calc(100vh - 6.1244rem);
  padding: 0.4rem 0.4rem 1.333333rem;
  overflow-y: auto;
}
.comment_list {
  width: 95%;
  min-height: 6rem;
  margin: 0.266667rem auto;
}
.comment_head {
  width: 100%;
  height: 3.5rem;
  background-color: rgb(247, 248, 249);
}
.comment_head_left img {
  width: 100%;
  height: 100%;
  border-radius: 0.106667rem;
}
.comment_head_left {
  width: 2.773333rem;
  height: 100%;
  float: left;
}
.comment_head_right {
  width: calc(100vw - 5.1rem);
  height: 100%;
  float: right;
}
.comment_head_right_title {
  margin: 0.266667rem 0.133333rem;
  margin-bottom: 1.6rem;
  font-size: 0.48rem;
}
.comment_head_right_zan {
  width: 1.333333rem;
  height: 1.333333rem;
  float: left;
  margin: 0 0.133333rem;
}
.comment_head_right_zan span {
  width: 1.333333rem;
  height: 1.333333rem;
  display: inline-block;
  color: rgb(82, 82, 82);
  font-size: 0.373333rem;
}
.comment_head_right_fen {
  width: 1.333333rem;
  height: 1.333333rem;
  font-size: 0.48rem;
  float: right;
  color: red;
}
.comment_conn {
  margin-top: 0.426667rem;
  width: 100%;
  min-height: 1rem;
}
.comment_conn_list {
  width: 100%;
  margin-bottom: 15px;
}
.comment_com {
  font-size: 0.373333rem;
}
.comment_time {
  margin-top: 5px;
  font-size: 0.32rem;
  color: rgb(181, 182, 184);
}
</style>